<template>
  <div class="concert-detail-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo" @click="goHome">艺柒————演唱会抢票系统</div>

    </header>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading">加载中...</div>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-container">
      <div class="error">{{ error }}</div>
      <el-button type="primary" @click="goHome">返回首页</el-button>
    </div>

    <!-- 演唱会详情内容 -->
    <div v-if="!loading && !error && concert" class="concert-detail">
      <!-- 顶部横幅 -->
      <div class="concert-banner">
        <img :src="concert.photo || 'https://img2.baidu.com/it/u=2438159428,931396326&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'"
             :alt="concert.title" class="banner-img" />
        <div class="banner-overlay">
          <h1 class="concert-title">{{ concert.title }}</h1>
          <p class="concert-artist">{{ concert.artist }}</p>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="concert-content">
        <div class="main-content">
          <!-- 基本信息 -->
          <el-card class="info-card">
            <h2>演出信息</h2>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">艺人：</span>
                <span class="info-value">{{ concert.artist }}</span>
              </div>
              <!-- 新增：场地名称 -->
              <div class="info-item">
                <span class="info-label">场地：</span>
                <span class="info-value">{{ concert.venueName || '未知场地' }}</span>
              </div>
              <!-- 新增：场地地址 -->
              <div class="info-item">
                <span class="info-label">地址：</span>
                <span class="info-value">{{ concert.venueAddress || '未知地址' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">开始时间：</span>
                <span class="info-value">{{ formatDate(concert.startdate) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">结束时间：</span>
                <span class="info-value">{{ formatDate(concert.enddate) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">开售时间：</span>
                <span class="info-value">{{ concert.startsale ? formatDate(concert.startsale) : '待公布' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">状态：</span>
                <span class="info-value status" :class="getStatusClass(concert.status)">
                  {{ getStatusText(concert.status) }}
                </span>
              </div>

            </div>
          </el-card>

          <!-- 演唱会简介 -->
          <el-card class="intro-card" v-if="concert.introduction">
            <h2>演唱会简介</h2>
            <div class="intro-content">
              {{ concert.introduction }}
            </div>
          </el-card>

          <!-- 新增座位选择区域 ???????????????????????????????????????????????????????????????????????????-->
          <el-card class="seat-select-card" v-if="concert.status === 1">
            <h2>选择座位区域</h2>
            <el-select v-model="selectedSeatId" placeholder="请选择座位区域">
              <el-option
                  v-for="seat in seatList"
                  :key="seat.id"
                  :label="`${seat.area} - 剩余${seat.count}张`"
                  :value="seat.id"
              ></el-option>
            </el-select>
          </el-card>

          <!-- 购票按钮 -->
          <div class="action-buttons">
            <el-button
                type="primary"
                size="large"
                :disabled="concert.status !== 1 || !selectedSeatId"
                @click="handleBuyTicket"
            >
              {{ concert.status === 1 ? (selectedSeatId ? '确认购票' : '请先选择座位区域') : getStatusText(concert.status) }}
            </el-button>
            <el-button size="large" @click="goHome">返回首页</el-button>
          </div>
        </div>

        <div class="sidebar">
          <!-- 演出海报 -->
          <el-card class="poster-card">
            <img :src="concert.photo || 'https://img2.baidu.com/it/u=2438159428,931396326&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'"
                 :alt="concert.title" class="poster-img" />
          </el-card>

          <!-- 状态信息 -->
          <el-card class="status-card">
            <h3>票务状态</h3>
            <div class="status-info">
              <div class="status-item" :class="getStatusClass(concert.status)">
                <i class="status-icon" :class="getStatusIcon(concert.status)"></i>
                <span>{{ getStatusText(concert.status) }}</span>
              </div>
              <p class="status-tip" v-if="concert.status === 0">演出尚未开售，请关注开售时间</p>
              <p class="status-tip" v-if="concert.status === 1">演出售票中，赶快购票吧！</p>
              <p class="status-tip" v-if="concert.status === 2">票已售罄，感谢您的关注</p>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import Footer from "@/view/footer.vue";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();

const apiClient = axios.create({
  baseURL: 'http://localhost:8085',
  timeout: 10000,
});

const apiClient1 = axios.create({
  baseURL: 'http://localhost:8089',
  timeout: 10000,
});

// 响应式变量
const concert = ref(null);
const seatList = ref([]); // 新增：座位区域列表
const selectedSeatId = ref(''); // 新增：选中的座位ID
const loading = ref(true);
const error = ref('');

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString();
};

// 新增：获取座位信息
async function fetchSeatInfo() {
  try {
    const id = (route.params.id);
    if (!id) {
      throw new Error('无效的演唱会ID');
    }

    const response = await apiClient1.get(`/seat/getSeatsByConcertId/${id}`);

    if (response.data && response.data.code === 200) {
      seatList.value = response.data.data;
    } else {
      throw new Error('获取座位信息失败');
    }
  } catch (err) {
    console.error('获取座位信息失败:', err);
    ElMessage.error('获取座位信息失败');
  }
}

// 获取演唱会详情
async function fetchConcertDetail() {
  try {
    loading.value = true;
    error.value = '';

    const id = route.params.id;
    if (!id) {
      throw new Error('无效的演唱会ID');
    }

    const response = await apiClient.get(`/concert/getConcertById/${id}`);

    if (response.data && response.data.code === 200) {
      concert.value = response.data.data;
      // 演唱会信息获取成功后，获取座位信息
      await fetchSeatInfo();
    } else {
      throw new Error('获取演唱会信息失败');
    }
  } catch (err) {
    console.error('获取演唱会详情失败:', err);
    error.value = err.response?.data?.message || err.message || '获取演唱会信息失败，请稍后重试';
    ElMessage.error('获取演唱会信息失败');
  } finally {
    loading.value = false;
  }
}

// 购票处理 - 修改为携带座位ID和演唱会ID跳转
function handleBuyTicket() {
  if (concert.value.status === 1 && selectedSeatId.value ) {
    ElMessage.success('开始购票流程');
    // 同时携带演唱会ID（params）和座位ID（query）
    router.push({
      path: `/pay/${concert.value.id}`, // 将concertId作为路径参数
      query: { seatId: selectedSeatId.value } // 将seatId作为查询参数
    });
  }
}


// 返回首页
function goHome() {
  router.push({ name: 'homepage' });
}

const getStatusClass = (status) => {
  const classMap = {
    0: 'status-not-started',
    1: 'status-selling',
    2: 'status-sold-out'
  };
  return classMap[status] || '';
};
// 在 concert.vue 的 <script setup> 中添加
const getStatusText = (status) => {
  const statusMap = {
    0: '未开售',
    1: '售票中',
    2: '已售空'
  };
  return statusMap[status] || '未知状态';
};
// 在 concert.vue 的 <script setup> 中添加
const getStatusIcon = (status) => {
  const iconMap = {
    0: 'el-icon-time',
    1: 'el-icon-shopping-cart-2',
    2: 'el-icon-circle-close'
  };
  return iconMap[status] || '';
};


// 页面挂载时获取数据
onMounted(() => {
  fetchConcertDetail();
});
</script>

<style scoped>
.concert-detail-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 10px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff6700;
  cursor: pointer;
}

.location,
.nav,
.user-actions {
  margin: 0 10px;
}

.nav a {
  margin: 0 5px;
  text-decoration: none;
  color: #333;
  padding: 5px;
  cursor: pointer;
}

.nav a:hover {
  color: #ff6700;
}

/* 加载和错误状态 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 50px 0;
}

.loading {
  font-size: 18px;
  color: #666;
}

.error {
  font-size: 18px;
  color: #f56c6c;
  margin-bottom: 20px;
}

/* 演唱会横幅 */
.concert-banner {
  position: relative;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 30px;
}

.concert-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.concert-artist {
  font-size: 18px;
  opacity: 0.9;
}

/* 主要内容区域 */
.concert-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 30px;
  margin: 30px 0;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 信息卡片 */
.info-card,
.intro-card,
.poster-card,
.status-card {
  border-radius: 12px;
  overflow: hidden;
}

.info-card h2,
.intro-card h2,
.status-card h3 {
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #ff6700;
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  font-weight: bold;
  color: #666;
  min-width: 80px;
}

.info-value {
  color: #333;
}

.status {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
}

.status-not-started {
  color: #e6a23c;
  background-color: #fdf6ec;
}

.status-selling {
  color: #67c23a;
  background-color: #f0f9eb;
}

.status-sold-out {
  color: #f56c6c;
  background-color: #fef0f0;
}

/* 简介内容 */
.intro-content {
  line-height: 1.8;
  color: #666;
}

/* 海报图片 */
.poster-img {
  width: 100%;
  border-radius: 8px;
}

/* 状态信息 */
.status-info {
  text-align: center;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.status-icon {
  font-size: 24px;
}

.status-tip {
  color: #666;
  font-size: 14px;
  margin-top: 10px;
}

/* 新增座位选择卡片样式 */
.seat-select-card {
  padding: 20px;
  margin: 20px 0;
}

.seat-select-card h2 {
  margin-bottom: 15px;
  color: #333;
  border-bottom: 2px solid #ff6700;
  padding-bottom: 10px;
}

/* 调整按钮样式 */
.action-buttons {
  margin-top: 20px;
  display: flex;
  gap: 15px;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .concert-content {
    grid-template-columns: 1fr;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .concert-banner {
    height: 200px;
  }

  .concert-title {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .action-buttons {
    flex-direction: column;
  }
}
</style>